<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas arcTo 使用切点绘制圆弧</title>
<style>
    body { background: url("/icon.png") repeat; }
    #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas? 
    </canvas>
</div>

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var context = canvas.getContext("2d");
    context.fillStyle = "#fff";
    context.fillRect(0, 0, 800, 600);

    context.beginPath();
    context.moveTo(200, 200);
    /*
    arcTo()方法接收5个参数，分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线，即由两个切线确定一条弧线。
    */
    // arcTo(x1, y1, x2, y2, radius);
    context.arcTo(600, 200, 600, 400, 100);
    context.lineWidth = 6;
    context.strokeStyle = "red";
    context.stroke();

    context.beginPath();
    context.moveTo(200, 200);
    context.lineTo(600, 200);
    context.lineTo(600, 400);
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();
}
</script>
</body>

</html>